<template>
  <div>
    <el-table :data="tableDataList" style="width: 100%;margin-top: 15px;" height="500" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
      <template slot="empty">
        <p>暂无无聊群</p>
      </template>
      <el-table-column prop="id" align="center" label="序号" min-width="10%">
      </el-table-column>
      <el-table-column prop="groupNumber" align="center" label="无聊群ID" min-width="20%">
      </el-table-column>
      <el-table-column prop="name" :show-overflow-tooltip="true" align="center" label="无聊群名称" min-width="20%">
      </el-table-column>
      <el-table-column prop="num" :show-overflow-tooltip="true" align="center" label="无聊群人数" min-width="20%">
      </el-table-column>
      <el-table-column prop="pushTitle" :show-overflow-tooltip="true" align="center" label="推送文案" min-width="30%">
      </el-table-column>
      <el-table-column prop="status" :show-overflow-tooltip="true" align="center" label="状态" min-width="10%">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">未推送</span>
          <span v-if="scope.row.status==1">推送中</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="10%">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==0" type="text" size="mini" @click="pushScreen(scope.row)">推送</el-button>
          <el-button v-if="scope.row.status==0" type="text" size="mini" @click="deleteGroup(scope.row)">删除</el-button>
          <el-button v-if="scope.row.status==1 && scope.row.downTime>0" type="text" size="mini" disabled>{{scope.row.downTime}}s</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 15px;text-align: right;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="创建无聊群推屏"
      :visible.sync="dialogVisible"
      width="40%"
      append-to-body>
      <el-row v-loading="editLoading">
        <el-form label-width="120px" size="mini" :model="dataForm" ref="ruleForm" :rules="rules">
          <el-col :span="24">
            <el-form-item label="无聊群ID："  prop="number">
              <el-input v-model="dataForm.number" maxlength="20" @blur="onRodeChange($event)" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="无聊群名称：" prop="name">
              <el-input v-model="dataForm.name" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="无聊群人数：" prop="num">
              <el-input v-model="dataForm.num" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="推送文案：" prop="pushTitle">
              <el-input  maxlength="255" placeholder="最多可编辑255个字" v-model="dataForm.pushTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <div style="text-align: center;">
            <el-button size="mini" @click="cancel">取消</el-button>
            <el-button size="mini" type="primary" @click="submitBoring">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "liveControllerGroupManage",
    components: {
    },
    props:{
      data:{
        type: Object,
        default:()=>{}
      }
    },
    data() {
      return {
        dialogVisible: false,
        editLoading: false,
        headerCellStyle:{
          'background-color': '#f1f1f1',
          'font-size':'12px',
          'color':'#000000'
        },
        cellStyle:{
          'font-size':'12px'
        },
        dataForm:{
          name:'',
          num:null,
          number:'',
          pushTitle:''
        },
        tableDataList:[],
        pageRequest:{
          pageNum:1,
          pageSize:10
        },
        totalSize:10,
        parentData:{},
        status:-1,
        rules: {
          number: [
            { required: true, message: '请输入无聊群ID', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '请输入正确的无聊群ID', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入正确的无聊群ID', trigger: 'blur' }
          ],
          pushTitle:[{required: true, message: '请输入推送文案', trigger: 'blur' }]
        }
      }
    },
    mounted: function () {
      this.parentData = this.data
      this.tableJSON();
      this.init();
    },
    destroyed(){ // 页面销毁
      this.clearTimer()
    },
    methods: {
      clearTimer(){ // 清除定时器
        clearInterval(this.timer)
      },
      init() {
        let i=0;
        this.timer = setInterval(() => {
          this.tableDataList.forEach((item,idx) => {
            if(item.status==1 && item.downTime>0){
              item.downTime = item.downTime - 1 <= 0 ? 0 : item.downTime - 1;
            }
          })
          this.tableDataList.forEach((item,idx) => {
            if(item.status==1 && item.downTime<=0){
              this.tableJSON();
            }
          })
          if(i==5){
            this.tableJSON();
            i=0;
          }
          i++;
        },1000)
      },
      tableJSON(){
        let params = {}
        params.liveId = this.parentData.id;
        params.pageNum = this.pageRequest.pageNum;
        params.pageSize = this.pageRequest.pageSize;
        this.utils.request.liveRequest({
          url: '/api/v1/boring/getBoring',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.tableDataList = data.data.rows;

            this.totalSize = data.data.total;
          }
        })
      },
      reset(){
        this.dataForm = {}
      },
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
      },
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
      },
      cancel(){ // 取消
        this.dialogVisible = false
      },
      submitBoring(){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.editLoading=true;
            let params = {}
            params.groupNumber=this.dataForm.number
            params.name=this.dataForm.name
            params.num=this.dataForm.num
            params.pushTitle=this.dataForm.pushTitle
            params.liveId=this.parentData.id
            this.utils.request.liveRequest({
              url: '/api/v1/boring/save',
              method: 'post',
              params: params
            }).then(result => {
              let data = result.data;
              if (data && data.code === '0') {
                this.dialogVisible = false
                this.$message.success("添加成功");
                this.tableJSON();
              }
              this.$refs.ruleForm.resetFields();
              this.editLoading=false;
            })
          }
        })

      },
      onRodeChange(event){
        let number=event.target.value
        let params={};
        params.number=number;
        this.utils.request.liveRequest({
          url: '/api/v1/boring/getBoringByNumber',
          method:'get',
          params: params
        }).
        then(result => {
          let data = result.data;
          if (data && data.code == "0") {
            this.dataForm.name=data.data.name;
            this.dataForm.num=data.data.num
          }
        })
      },
      pushScreen(row){
        let params = {}
        params.id=row.id
        params.liveId=this.parentData.id
        this.utils.request.liveRequest({
          url: '/api/v1/boring/push',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$emit("pushScreen",data.data)
            this.tableJSON();
          }
        })
      },
      deleteGroup(row){ //删除
        this.editLoading=true
        let id = row.id;
        this.$confirm("确定删除吗", "提示", {type:'warning'}).then(() => {
          this.utils.request.liveRequest({
            url: '/api/v1/boring/delete',
            method: 'post',
            params: {"id":id,"liveId":this.parentData.id}
          }).then(result => {
            let data = result.data;
            if (data && data.code == '0') {
              this.tableJSON();
              this.$message.success("删除成功");
            }else{
              this.$message.success("删除成功");
            }
          })
        })
      },
      cancelPush(row){
        let params = {
          id: row.id,
          liveId: this.parentData.id,
        };
        this.utils.request.liveRequest({
          url: '/api/v1/boring/cancelPush',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code == '0') {
            this.$emit("pushScreen",row)
            this.tableJSON();
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
